<template>
  <div class="banner_box">
      <template>
        <el-carousel :interval="5000" arrow="hover" height="600px">
            
            <el-carousel-item v-for="(item,index) in banner_list" :key="index">
                <router-link :to="{name:'PhotoInfo',query:{pic_url:item.url_mid}}">
                    <img :src="item.url_mid" alt="">
                </router-link>
                
            </el-carousel-item>
        </el-carousel>
      </template>
  </div>
</template>

<script>
export default {
    name:'banner',
    data() {
        return {
            banner_list:[]
        }
    },
    methods:{
       getData(){
            var url='https://realwds-api.vercel.app/360/getAppsByCategory?cid=26&start=0&count=5'
       this.$axios.get(url)
        .then(res=>{
            // console.log(res.data.data.data);
            this.banner_list=res.data.data.data
        })
        }
    },
    mounted(){
        this.getData()
    }

}
</script>

<style scoped>
    .banner_box{
        width: 1200px;
        min-width: 1200px;
        margin: 0px auto;
    }
    .banner_box img{
        width: 100%;
        height: 600px;
    }
</style>